<template>
  <div class="home-index">
    <!-- <div style="width: calc(100vw); height: calc(100vh); background: url(../../../static/pc_bg.png) no-repeat; background-size: 100% 100%; overflow: auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; position: relative;" class="invisible-scrollbar"> -->
    <div
      style="
        width: calc(100vw);
        height: calc(100vh);
        background: url(../../../static/bgd.png) no-repeat;
        background-size: 100% 100%;
        overflow: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        position: relative;
      "
      class="invisible-scrollbar"
    >
      <!-- 标题开始 -->
      <div
        ref="matchTitleElement"
        style="
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          position: relative;
        "
        :style="{ paddingTop: 30 / 96 + 'rem', paddingBottom: 29 / 96 + 'rem' }"
      >
        <div
          :style="{
            width: '7%',
            height: '100%',
            position: 'absolute',
            top: '0rem',
            left: '0rem',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
          }"
          @mouseleave="leaveClick"
          @mouseenter="enterClick"
        >
          <div
            v-if="backsShows"
            :style="{
              width: '100%',
              height: '100%',
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center',
              cursor: 'pointer',
            }"
            @click="goBackClick"
          >
            <img
              :style="{ width: 50 / 96 + 'rem', height: 50 / 96 + 'rem' }"
              src="../../../static/match-backs.png"
            />
          </div>
        </div>
        <div class="match-title-main" :style="{ height: '100%' }">
          <span class="match-title" :style="{ fontSize: (60 / 96) + 'rem', /*lineHeight: (30 / 96) + 'rem'*/ }">{{
            matchTitle }}</span>
        </div>
        <!-- 新增设置 -->
        <div
          :style="{width: '17%', height: '100%', position: 'absolute', top: '0rem', right: '0rem', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}"
          @mouseleave="leaveSettingClick" @mouseenter="enterSettingClick">
          <div v-if="settingShows"
            :style="{width: '100%', height: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }">
            <div
              style="width: 60%; height: 100%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; cursor: pointer;"
              @click="settingClick">
              <span style="font-size: 0.5rem; color: #FFFFFF;">设置</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 标题结束 -->
      <!-- 篮球长蜂鸣开始 -->
      <div v-show="false">
        <audio ref="audioLongRef" id="audio">
          <source src="../../../static/long.mp3" type="audio/mpeg" />
        </audio>
      </div>
      <!-- 篮球长蜂鸣结束 -->
      <!-- 篮球短蜂鸣开始 -->
      <div v-show="false">
        <audio ref="audioShortRef" id="audio">
          <source src="../../../static/short.mp3" type="audio/mpeg" />
        </audio>
      </div>
      <!-- 篮球短蜂鸣结束 --> 
      <!-- 队伍开始 -->
      <div
        style="
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
        "
        ref="teamElement"
      >
        <div
          :style="{ width: '47.39%' }"
          style="
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
          "
        >
          <div
            :style="{
              height: 108 / 96 + 'rem',
              borderTop: 2 / 96 + 'rem solid',
              borderBottom: 2 / 96 + 'rem solid',
            }"
            style="
              border-image: -webkit-linear-gradient(
                  -88deg,
                  #000000,
                  #ffffff,
                  #000000
                )
                10 10;
              border-image: -moz-linear-gradient(
                  -88deg,
                  #000000,
                  #ffffff,
                  #000000
                )
                10 10;
              border-image: linear-gradient(-88deg, #000000, #ffffff, #000000)
                10 10;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              flex: 1;
            "
          >
            <span
              :style="{
                fontSize: 76 / 96 + 'rem',
                lineHeight: 76 / 96 + 'rem',
                textOverflow: '-o-ellipsis-lastline',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                display: '-webkit-box',
                '-webkitLineClamp': 2,
                lineClamp: 2,
                '-webkitBoxOrient': 'vertical',
              }"
              style="font-family: sans-serif; font-weight: 400; color: #ffffff"
            >{{ homeTeamName }}</span
            >
          </div>
          <div
            :style="{ width: 157 / 96 + 'rem', height: 157 / 96 + 'rem' }"
            style="margin-right: 0.5rem; display: flex; align-items: center"
          >
            <img
              :style="{ width: '100%', borderRadius: '100%' }"
              :src="homeTeamImg"
            />
          </div>
          <div
            :style="{ width: 200 / 96 + 'rem' }"
            style="
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              cursor: pointer;
            "
            @click="toMatchInfosClick"
          >
            <span
              :style="{ fontSize: 170 / 96 + 'rem' }"
              style="font-family: fantasy; font-weight: bold; color: #fff"
            >{{ homeTeamScorce }}</span
            >
          </div>
        </div>
        <div
          :style="{ width: '5.2%' }"
          style="
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            position: relative;
            margin: 0 0.5rem;
          "
        >
          vs
          <!-- <div v-if="homeTeamScorce > awayTeamScorce"
            :style="{ width: (100 / 96) + 'rem', height: (43 / 96) + 'rem', marginTop: -(16 / 96) + 'rem' }"
            style="width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; position: absolute; top: -0.1rem;">
            <img style="width: 100%; height: 100%;" src="../../../static/pc_jt-left.png" />
          </div>
          <div v-if="homeTeamScorce < awayTeamScorce"
            :style="{ width: (100 / 96) + 'rem', height: (43 / 96) + 'rem', marginTop: -(16 / 96) + 'rem' }"
            style="width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; position: absolute; top: -0.1rem;">
            <img style="width: 100%; height: 100%;" src="../../../static/pc_jt-right.png" />
          </div>
          <div v-if="homeTeamScorce == awayTeamScorce"
            :style="{ width: (100 / 96) + 'rem', height: (43 / 96) + 'rem', marginTop: -(16 / 96) + 'rem' }"
            style="width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; position: absolute; top: -0.1rem;">
          </div> -->
          <!-- <span :style="{ fontSize: (50 / 96) + 'rem' }"
            style="font-family: SimHei; font-weight: normal; color: #EEEEEE;">:</span> -->
          <!-- <div :style="{ width: (157 / 96) + 'rem', height: (157 / 96) + 'rem' }">
            <img :style="{ width: '100%', height: '100%', borderRadius: '100%' }" src="../../../static/tengxun.png" />
          </div> -->
          <!-- <div :style="{ width: (157 / 96) + 'rem', height: (157 / 96) + 'rem' }">
            <img :style="{ width: '100%', height: '100%' }" src="../../../static/tengxun.png" />
          </div> -->
        </div>
        <div
          :style="{ width: '47.39%' }"
          style="
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
          "
        >
          <div
            :style="{ width: 200 / 96 + 'rem' }"
            style="
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              cursor: pointer;
            "
            @click="toMatchInfosClick"
          >
            <span
              :style="{ fontSize: 170 / 96 + 'rem' }"
              style="font-family: fantasy; font-weight: bold; color: #fff"
            >{{ awayTeamScorce }}</span
            >
          </div>
          <div
            class="title-img"
            :style="{ width: 157 / 96 + 'rem', height: 157 / 96 + 'rem' }"
          >
            <img :src="awayTeamImg"/>
          </div>
          <div
            :style="{
              height: 108 / 96 + 'rem',
              borderTop: 2 / 96 + 'rem solid',
              borderBottom: 2 / 96 + 'rem solid',
            }"
            style="
              flex: 1;
              border-image: -webkit-linear-gradient(
                  -88deg,
                  #000000,
                  #ffffff,
                  #000000
                )
                10 10;
              border-image: -moz-linear-gradient(
                  -88deg,
                  #000000,
                  #ffffff,
                  #000000
                )
                10 10;
              border-image: linear-gradient(-88deg, #000000, #ffffff, #000000)
                10 10;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
            "
          >
            <span
              :style="{
                fontSize: 76 / 96 + 'rem',
                lineHeight: 76 / 96 + 'rem',
                textOverflow: '-o-ellipsis-lastline',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                display: '-webkit-box',
                '-webkitLineClamp': 2,
                lineClamp: 2,
                '-webkitBoxOrient': 'vertical',
              }"
              style="font-family: SimHei; font-weight: 400; color: #ffffff"
            >{{ awayTeamName }}</span
            >
          </div>
        </div>
      </div>
      <!-- 队伍结束 -->
      <!-- 主体开始 -->
      <div
        class="body-con-list"
        :style="{ height: mainHeight + 'px' }"
        ref="mainElement"
      >
      <!-- 左边队伍 -->
        <div
          :style="{ height: mainHeight + 'px' }"
          class="invisible-scrollbar body-con"
        >
          <div
            :style="{
              height: 54 / 96 + 'rem',
              marginTop: 19 / 96 + 'rem',
              marginBottom: 19 / 96 + 'rem',
            }"
            style="
              width: 100%;
              display: flex;
              flex-direction: row;
              justify-content: flaex-start;
              align-items: center;
            "
            ref="titleElement"
          >
            <div
              :style="{ width: 77 / 96 + 'rem' }"
              style="
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
              "
            >
              <span
                :style="{
                  fontSize: 30 / 96 + 'rem',
                  lineHeight: 30 / 96 + 'rem',
                }"
                style="font-family: SimHei; font-weight: 400; color: #ababab"
              >号码</span
              >
            </div>
            <div
              :style="{ width: '57.9%' }"
              style="
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
              "
            >
              <span
                :style="{
                  fontSize: 30 / 96 + 'rem',
                  lineHeight: 30 / 96 + 'rem',
                }"
                style="font-family: SimHei; font-weight: 400; color: #ababab"
              >姓名</span
              >
            </div>
            <div
              :style="{ width: 77 / 96 + 'rem' }"
              style="
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
              "
            >
              <span
                :style="{
                  fontSize: 30 / 96 + 'rem',
                  lineHeight: 30 / 96 + 'rem',
                }"
                style="font-family: SimHei; font-weight: 400; color: #ababab"
              >犯规</span
              >
            </div>
            <div
              :style="{ width: 77 / 96 + 'rem' }"
              style="
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
              "
            >
              <span
                :style="{
                  fontSize: 30 / 96 + 'rem',
                  lineHeight: 30 / 96 + 'rem',
                }"
                style="font-family: SimHei; font-weight: 400; color: #ababab"
              >得分</span
              >
            </div>
          </div>
          <div
            v-if="homeTeamElementHeight > mainHeightItem"
            style="width: 100%"
          >
            <vue-seamless-scroll
              :data="homeTeamLists"
              class="seamless-warp"
              :class-option="classLeftOption"
              :style="{ height: mainHeightItem + 'px' }"
            >
              <div
               ref="homeTeamElement" style="width: 100%;marginBottom">
                <div
                  v-for="(item, index) in homeTeamLists"
                  :key="index"
                  style="
                    width: 100%;
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;
                    overflow: auto;
                  "
                  :style="{
                    height: 54 / 96 + 'rem',
                    borderTopLeftRadius: 54 / 96 + 'rem',
                    borderBottomLeftRadius: 54 / 96 + 'rem',
                    color: item.isUp == 1 ? '#ffc336 !important' : '#fff',
                  }"
                >
                  <div
                    style="
                      width: 100%;
                      display: flex;
                      flex-direction: row;
                      justify-content: flex-start;
                      align-items: center;
                    "
                    :style="{
                      height: 50 / 96 + 'rem',
                      color: item.isUp == 1 ? '#ffc336' : '#fff',
                    }"
                  >
                    <div
                      :style="{ width: 77 / 96 + 'rem' }"
                      style="
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                      "
                    >
                      <span
                        :style="{
                          fontSize: 38 / 96 + 'rem',
                          lineHeight: 30 / 96 + 'rem',
                        }"
                        style="font-family: SimHei; font-weight: 400"
                      >{{ item.playerNum }}</span
                      >
                    </div>
                    <div
                      :style="{ width: '57.9%' }"
                      style="
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                      "
                    >
                      <span
                        :style="{
                          fontSize: 36 / 96 + 'rem',
                          lineHeight: 30 / 96 + 'rem',
                        }"
                        style="font-family: SimHei; font-weight: 400; ,color: item.isUp == 1 ? '#ffc336 !important' : '#fff'}"
                      >{{ item.playerName }}</span
                      >
                    </div>
                    <!-- 这是那个黄色的点 -->
                    <div
                      :style="{ width: 77 / 96 + 'rem' }"
                      style="
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                      "
                    >
                      <span
                        :style="{
                          fontSize: 38 / 96 + 'rem',
                          lineHeight: 30 / 96 + 'rem',
                          color: item.fNum >= 5 ? 'red' : '',
                        }"
                        style="font-family: SimHei; font-weight: 400;}"
                      >{{ item.fNum }}</span
                      >
                    </div>
                    <div
                      :style="{ width: 77 / 96 + 'rem' }"
                      style="
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                      "
                    >
                      <span
                        :style="{
                          fontSize: 38 / 96 + 'rem',
                          lineHeight: 30 / 96 + 'rem',
                        }"
                        style="font-family: SimHei; font-weight: 400; ,color: item.isUp == 1 ? '#ffc336 !important' : '#fff'}"
                      >{{ item.pNum }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </vue-seamless-scroll>
          </div>
          <div
            v-if="homeTeamElementHeight <= mainHeightItem"
            style="width: 100%"
          >
            <div ref="homeTeamElement" style="width: 100%">
              <div
                v-for="(item, index) in homeTeamLists"
                :key="index"
                style="
                  width: 100%;
                  display: flex;
                  flex-direction: row;
                  justify-content: flex-start;
                  align-items: center;
                  overflow: auto;
                "
                :style="{
                  height: 54 / 96 + 'rem',
                  borderTopLeftRadius: 54 / 96 + 'rem',
                  borderBottomLeftRadius: 54 / 96 + 'rem',
                }"
              >
                <div
                  style="
                    width: 100%;
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;
                  "
                  :style="{ height: 50 / 96 + 'rem' }"
                >
                  <div
                    :style="{ width: 77 / 96 + 'rem' }"
                    style="
                      display: flex;
                      flex-direction: row;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                  <!-- color: item.isFirst ? '#5DAC81' : 'rgba(238, 238, 238, 0.8)', -->
                    <span
                      :style="{
                        fontSize: 38 / 96 + 'rem',
                        lineHeight: 30 / 96 + 'rem',
                        color: item.isUp == 1 ? '#ffc336 !important' : '#fff'
                      }"
                      style="font-family: SimHei; font-weight: 400"
                    >{{ item.playerNum }}</span
                    >
                  </div>
                  <div
                    :style="{ width: '57.9%' }"
                    style="
                      display: flex;
                      flex-direction: row;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    <span
                      :style="{
                        fontSize: 36 / 96 + 'rem',
                        lineHeight: 30 / 96 + 'rem',
                        color: item.isUp == 1 ? '#ffc336 !important' : '#fff'
                      }"
                      style="
                        font-family: SimHei;
                        font-weight: 400;
                        color: rgba(238, 238, 238, 0.8);
                      "
                    >{{ item.playerName }}</span
                    >
                  </div>
                  <div
                    :style="{ width: 77 / 96 + 'rem' }"
                    style="
                      display: flex;
                      flex-direction: row;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                  <!-- color: item.isUp == 1 ? '#ffc336 !important' : '#fff' -->
                    <span
                      :style="{
                        fontSize: 38 / 96 + 'rem',
                        lineHeight: 30 / 96 + 'rem',
                        color:
                          item.fNum > 4
                            ? 'rgb(229, 9, 9)' : item.isUp == 1 ?'#ffc336'
                            : 'rgba(238, 238, 238, 0.8)',
                      }"
                      style="
                        font-family: SimHei;
                        font-weight: 400;
                        color: rgba(238, 238, 238, 0.8);
                      "
                    >{{ item.fNum }}</span
                    >
                  </div>
                  <div
                    :style="{ width: 77 / 96 + 'rem' }"
                    style="
                      display: flex;
                      flex-direction: row;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    <span
                      :style="{
                        fontSize: 38 / 96 + 'rem',
                        lineHeight: 30 / 96 + 'rem',
                        color: item.isUp == 1 ? '#ffc336 !important' : '#fff'
                      }"
                      style="
                        font-family: SimHei;
                        font-weight: 400;
                        color: rgba(238, 238, 238, 0.8);
                      "
                    >{{ item.pNum }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 中间 -->
        <div
          :style="{ width: '36%', height: mainHeight + 'px' }"
          style="
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
          "
          class="invisible-scrollbar"
        >
          <!-- 节数开始 -->
          <span
            :style="{ fontSize: 96 / 96 + 'rem', marginTop: '6%' }"
            style="font-family: SimHei; font-weight: normal; color: #ffffff"
          >{{ sectionsNum }}</span
          >
          <!-- 节数结束 -->
          <div
            v-if="countDown"
            style="
              width: 100%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            "
          >
            <!-- 倒计时开始 -->
            <div v-if="sectionShow"
              style="margin-top: 14px; display: flex; flex-direction: row; justify-content: center; align-items: center;">
              <div v-if="showMinuteMnisecond" :style="{ width: (100 / 96) + 'rem' }" style="position: relative;">
                <div
                  :style="{ height: (60 / 96) + 'rem', marginBottom: (2 / 96) + 'rem', borderTopLeftRadius: (5 / 96) + 'rem', borderTopRightRadius: (5 / 96) + 'rem', boxShadow: '0rem ' + (8 / 96) + 'rem ' + (10 / 96) + 'rem 0rem rgba(18, 19, 39, 0.61)' }"
                  style="width: 100%; background: #FFFFFF; opacity: 0.95;"></div>
                <div
                  :style="{ height: (60 / 96) + 'rem', marginTop: (2 / 96) + 'rem', borderBottomLeftRadius: (5 / 96) + 'rem', borderBottomRightRadius: (5 / 96) + 'rem', boxShadow: '0rem ' + (8 / 96) + 'rem ' + (10 / 96) + 'rem 0rem rgba(18, 19, 39, 0.61)' }"
                  style="width: 100%; background: #FFFFFF; opacity: 0.95;"></div>
                <div
                  style="width: 100%; height: 100%; position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; top: 0;">
                  <!-- <span :style="{ fontSize: (80 / 96) + 'rem' }" style="font-family: Adobe Heiti Std; font-weight: bold; color: #000000;">{{ minute }}</span> -->
                  <input :style="{ width: '100%', height: '100%', fontSize: (80 / 96) + 'rem' }"
                    style="font-family: Adobe Heiti Std; font-weight: bold; color: #000000; text-align: center;"
                    v-model="minute" @input="minuteInput" />
                </div>
              </div>
              <div @click="showMinuteMnisecondClick" v-if="showMinuteMnisecond" :style="{ width: (60 / 96) + 'rem' }"
                style="height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer;">
                <span :style="{ fontSize: (40 / 96) + 'rem' }"
                  style="font-family: Adobe Heiti Std; font-weight: bold; color: #FFFFFF;">:</span>
              </div>
              <div :style="{ width: (100 / 96) + 'rem' }" style="position: relative;">
                <div
                  :style="{ height: (60 / 96) + 'rem', marginBottom: (2 / 96) + 'rem', borderTopLeftRadius: (5 / 96) + 'rem', borderTopRightRadius: (5 / 96) + 'rem', boxShadow: '0rem ' + (8 / 96) + 'rem ' + (10 / 96) + 'rem 0rem rgba(18, 19, 39, 0.61)' }"
                  style="width: 100%; background: #FFFFFF; opacity: 0.95;"></div>
                <div
                  :style="{ height: (60 / 96) + 'rem', marginTop: (2 / 96) + 'rem', borderBottomLeftRadius: (5 / 96) + 'rem', borderBottomRightRadius: (5 / 96) + 'rem', boxShadow: '0rem ' + (8 / 96) + 'rem ' + (10 / 96) + 'rem 0rem rgba(18, 19, 39, 0.61)' }"
                  style="width: 100%; background: #FFFFFF; opacity: 0.95;"></div>
                <div
                  style="width: 100%; height: 100%; position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; top: 0;">
                  <!-- <span :style="{ fontSize: (80 / 96) + 'rem' }" style="font-family: Adobe Heiti Std; font-weight: bold; color: #000000;">{{ second }}</span> -->
                  <input :style="{ width: '100%', height: '100%', fontSize: (80 / 96) + 'rem' }"
                    style="font-family: Adobe Heiti Std; font-weight: bold; color: #000000; text-align: center;"
                    v-model="second" @input="secondInput" />
                </div>
              </div>
              <div @click="showMinuteMnisecondClick" v-if="!showMinuteMnisecond" :style="{ width: (60 / 96) + 'rem' }"
                style="height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer;">
                <span :style="{ fontSize: (40 / 96) + 'rem' }"
                  style="font-family: Adobe Heiti Std; font-weight: bold; color: #FFFFFF;">.</span>
              </div>
              <div v-if="!showMinuteMnisecond" :style="{ width: (100 / 96) + 'rem' }" style="position: relative;">
                <div
                  :style="{ height: (60 / 96) + 'rem', marginBottom: (2 / 96) + 'rem', borderTopLeftRadius: (5 / 96) + 'rem', borderTopRightRadius: (5 / 96) + 'rem', boxShadow: '0rem ' + (8 / 96) + 'rem ' + (10 / 96) + 'rem 0rem rgba(18, 19, 39, 0.61)' }"
                  style="width: 100%; background: #FFFFFF; opacity: 0.95;"></div>
                <div
                  :style="{ height: (60 / 96) + 'rem', marginTop: (2 / 96) + 'rem', borderBottomLeftRadius: (5 / 96) + 'rem', borderBottomRightRadius: (5 / 96) + 'rem', boxShadow: '0rem ' + (8 / 96) + 'rem ' + (10 / 96) + 'rem 0rem rgba(18, 19, 39, 0.61)' }"
                  style="width: 100%; background: #FFFFFF; opacity: 0.95;"></div>
                <div
                  style="width: 100%; height: 100%; position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; top: 0;">
                  <!-- <span :style="{ fontSize: (80 / 96) + 'rem' }" style="font-family: Adobe Heiti Std; font-weight: bold; color: #000000;">{{ millisecond }}</span> -->
                  <input :style="{ width: '100%', height: '100%', fontSize: (80 / 96) + 'rem' }"
                    style="font-family: Adobe Heiti Std; font-weight: bold; color: #000000; text-align: center;"
                    v-model="millisecond" @input="millisecondInput" />
                </div>
              </div>
            </div>
            <!-- 倒计时结束 -->
            <!-- 24秒开始 -->
            <div v-if="time1Show"
              :style="{ width: (130 / 96) + 'rem', height: (76 / 96) + 'rem', marginTop: (29 / 96) + 'rem', borderRadius: (10 / 96) + 'rem' }"
              style="background: url(../../../static/kuang.png) no-repeat; background-size: 100% 100%; opacity: 0.95; display: flex; flex-direction: row; justify-content: center; align-items: center;">
              <div
                :style="{ width: (126 / 96) + 'rem', height: (70 / 96) + 'rem', borderRadius: (10 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }">
                <input :style="{ width: '100%', height: '100%', fontSize: (60 / 96) + 'rem' }"
                  style="font-family: Adobe Heiti Std; font-weight: normal; color: #E49805; text-align: center;"
                  v-model="time1" />
              </div>
            </div>
          </div>
          <!-- 24秒结束 -->
          <!-- 暂停开始 -->
          <div
            style="
              width: 100%;
              display: flex;
              flex-direction: row;
              justify-content: space-around;
              align-items: center;
            "
          >
            <div
              :style="{ width: (100 / 96) * 3 + 'rem' }"
              style="
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
              "
            >
              <div
                v-for="(item, index) in homeTeamSuspendNumK"
                :key="index"
                :style="{
                  margin: 5 / 96 + 'rem',
                  background: index + 1 <= homeTeamSuspendNum ? 'green' : '',
                }"
              >
                <div
                  :style="{ width: 70 / 96 + 'rem', height: 70 / 96 + 'rem' }"
                  style="border: 1px solid #2c4c6c"
                ></div>
              </div>

              <!--<div
                style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (150 / 96) + 'rem' }"
                  style="font-family: SimHei; font-weight: normal; color: #fff;">{{ homeTeamSuspendNum
                  }}</span>
              </div> -->
            </div>
            <!-- <div :style="{ width: 60 / 96 + 'rem' }"></div> -->
            <!--<div :style="{ width: (200 / 96) + 'rem' }">
              <div
                style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (50 / 96) + 'rem' }"
                  style="font-family: SimHei; font-weight: normal; color: #07BA18;">暂停</span>
              </div>
            </div> -->
            <!-- <div :style="{ width: 60 / 96 + 'rem' }"></div> -->
            <div
              :style="{ width: (100 / 96) * 3 + 'rem' }"
              style="
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
              "
            >
              <div
                v-for="(item, index) in awayTeamSuspendNumK"
                :key="index"
                :style="{
                  margin: 5 / 96 + 'rem',
                  background: index + 1 <= awayTeamSuspendNum ? 'green' : '',
                }"
              >
                <div
                  :style="{ width: 70 / 96 + 'rem', height: 70 / 96 + 'rem' }"
                  style="border: 1px solid #2c4c6c"
                ></div>
              </div>
              <!-- <div
                style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (150 / 96) + 'rem' }"
                  style="font-family: SimHei; font-weight: normal; color: #fff;">{{ awayTeamSuspendNum
                  }}</span>
              </div> -->
            </div>
          </div>
          <!-- 暂停结束 -->
          <!-- 犯规开始 -->
          <div
            style="
              width: 100%;
              display: flex;
              flex-direction: row;
              justify-content: space-around;
              align-items: center;
            "
            :style="{ marginTop: 100 / 96 + 'rem' }"
          >
            <div :style="{ width: 100 / 96 + 'rem' }">
              <div
                style="
                  width: 100%;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                "
              >
                <span
                  :style="{ fontSize: 50 / 96 + 'rem' }"
                  style="
                    font-family: SimHei;
                    font-weight: normal;
                    color: #e3f0c5;
                  "
                >犯规</span
                >
                <span
                  :style="{
                    fontSize: 150 / 96 + 'rem',
                    color: homeTeamfoulNum >= 5 ? 'red' : '#fff',
                  }"
                  style="font-family: SimHei; font-weight: normal"
                >{{ homeTeamfoulNum >= 5 ? "F" : homeTeamfoulNum }}</span
                >
              </div>
            </div>
            <div :style="{ width: 60 / 96 + 'rem' }"></div>
            <!-- <div :style="{ width: (200 / 96) + 'rem' }">
              <div
                style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (50 / 96) + 'rem' }"
                  style="font-family: SimHei; font-weight: normal; color: rgb(229, 9, 9)">犯规</span>
              </div>
            </div> -->
            <div :style="{ width: 60 / 96 + 'rem' }"></div>
            <div :style="{ width: 100 / 96 + 'rem' }">
              <div
                style="
                  width: 100%;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                "
              >
                <span
                  :style="{ fontSize: 50 / 96 + 'rem' }"
                  style="
                    font-family: SimHei;
                    font-weight: normal;
                    color: #e3f0c5;
                  "
                >犯规</span
                >
                <span
                  :style="{
                    fontSize: 150 / 96 + 'rem',
                    color: awayTeamfoulNum >= 5 ? 'red' : '#fff',
                  }"
                  style="font-family: SimHei; font-weight: normal"
                >{{ awayTeamfoulNum >= 5 ? "F" : awayTeamfoulNum }}</span
                >
              </div>
            </div>
          </div>
          <!-- 犯规结束 -->
        </div>
        <!-- 右边队伍 -->
        <div
          :style="{ width: '30%', height: mainHeight + 'px' }"
          style="
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-end;
            overflow: hidden;
          "
          class="invisible-scrollbar"
        >
          <div
            :style="{
              height: 54 / 96 + 'rem',
              marginTop: 19 / 96 + 'rem',
              marginBottom: 19 / 96 + 'rem',
            }"
            style="
              width: 100%;
              display: flex;
              flex-direction: row;
              justify-content: flex-end;
              align-items: center;
            "
          >
            <div
              :style="{ width: 77 / 96 + 'rem' }"
              style="
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
              "
            >
              <span
                :style="{
                  fontSize: 30 / 96 + 'rem',
                  lineHeight: 30 / 96 + 'rem',
                }"
                style="font-family: SimHei; font-weight: 400; color: #ababab"
              >号码</span
              >
            </div>
            <div
              :style="{ width: '57.9%' }"
              style="
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
              "
            >
              <span
                :style="{
                  fontSize: 30 / 96 + 'rem',
                  lineHeight: 30 / 96 + 'rem',
                }"
                style="font-family: SimHei; font-weight: 400; color: #ababab"
              >姓名</span
              >
            </div>
            <div
              :style="{ width: 77 / 96 + 'rem' }"
              style="
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
              "
            >
              <span
                :style="{
                  fontSize: 30 / 96 + 'rem',
                  lineHeight: 30 / 96 + 'rem',
                }"
                style="font-family: SimHei; font-weight: 400; color: #ababab"
              >犯规</span
              >
            </div>
            <div
              :style="{ width: 77 / 96 + 'rem' }"
              style="
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
              "
            >
              <span
                :style="{
                  fontSize: 30 / 96 + 'rem',
                  lineHeight: 30 / 96 + 'rem',
                }"
                style="font-family: SimHei; font-weight: 400; color: #ababab"
              >得分</span
              >
            </div>
          </div>
          <div
            v-if="awayTeamElementHeight > mainHeightItem"
            style="width: 100%"
          >
            <vue-seamless-scroll
              :data="awayTeamLists"
              class="seamless-warp"
              :class-option="classRightOption"
              :style="{ height: mainHeightItem + 'px' }"
            >
              <div ref="awayTeamElement" style="width: 100%">
                <div
                  v-for="(item, index) in awayTeamLists"
                  :key="index"
                  style="
                    width: 100%;
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-end;
                    align-items: center;
                  "
                  :style="{
                    height: 54 / 96 + 'rem',
                    borderTopRightRadius: 54 / 96 + 'rem',
                    borderBottomRightRadius: 54 / 96 + 'rem',
                  }"
                >
                  <div
                    style="
                      width: 100%;
                      display: flex;
                      flex-direction: row;
                      justify-content: flex-end;
                      align-items: center;
                    "
                    :style="{
                      height: 50 / 96 + 'rem',
                      color: item.isUp == 1 ? '#ffc336 !important' : '#fff',
                    }"
                  >
                    <div
                      :style="{ width: 77 / 96 + 'rem' }"
                      style="
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                      "
                    >
                      <span
                        :style="{
                          fontSize: 38 / 96 + 'rem',
                          lineHeight: 30 / 96 + 'rem',
                          color: item.isUp == 1 ? '#ffc336 !important' : '#fff',
                        }"
                        style="font-family: SimHei; font-weight: 400"
                      >{{ item.playerNum }}</span
                      >
                    </div>
                    <div
                      :style="{ width: '57.9%' }"
                      style="
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                      "
                    >
                      <span
                        :style="{
                          fontSize: 36 / 96 + 'rem',
                          lineHeight: 30 / 96 + 'rem',
                          color: item.isUp == 1 ? '#ffc336 !important' : '#fff',
                        }"
                        style="font-family: SimHei; font-weight: 400"
                      >{{ item.playerName }}</span
                      >
                    </div>
                    <div
                      :style="{ width: 126 / 96 + 'rem' }"
                      style="
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                      "
                    >
                      <span
                        :style="{
                          fontSize: 38 / 96 + 'rem',
                          lineHeight: 30 / 96 + 'rem',
                          color: item.fNum >= 5 ? 'red' : '',
                        }"
                        style="font-family: SimHei; font-weight: 400"
                        v-html="item.fNum"
                      ></span>
                    </div>
                    <div
                      :style="{ width: 77 / 96 + 'rem' }"
                      style="
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                      "
                    >
                      <span
                        :style="{
                          fontSize: 38 / 96 + 'rem',
                          lineHeight: 30 / 96 + 'rem',
                          color: item.isUp == 1 ? '#ffc336 !important' : '#fff',
                        }"
                        style="font-family: SimHei; font-weight: 400"
                      >{{ item.pNum }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </vue-seamless-scroll>
          </div>
          <div
            v-if="awayTeamElementHeight <= mainHeightItem"
            style="width: 100%"
          >
            <div ref="awayTeamElement" style="width: 100%">
              <div
                v-for="(item, index) in awayTeamLists"
                :key="index"
                :style="{
                  height: 54 / 96 + 'rem',
                  borderTopRightRadius: 54 / 96 + 'rem',
                  borderBottomRightRadius: 54 / 96 + 'rem',
                }"
              >
                <div class="list-one" :style="{ height: 50 / 96 + 'rem' }">
                  <div :style="{ width: 77 / 96 + 'rem' }">
                    <!-- color: item.isFirst
                          ? '#5DAC81'
                          : 'rgba(238, 238, 238, 0.8)', -->
                    <span
                      :style="{
                        fontSize: 38 / 96 + 'rem',
                        lineHeight: 30 / 96 + 'rem',
                        color: item.isUp == 1 ? '#ffc336 !important' : '#fff'
                      }"
                      style="font-family: SimHei; font-weight: 400"
                    >{{ item.playerNum }}</span
                    >
                  </div>
                  <div :style="{ width: '57.9%' }">
                    <span
                      :style="{
                        fontSize: 36 / 96 + 'rem',
                        lineHeight: 30 / 96 + 'rem',
                        color: item.isUp == 1 ? '#ffc336 !important' : '#fff'
                      }"
                      style="
                        font-family: SimHei;
                        font-weight: 400;
                      "
                    >{{ item.playerName }}</span
                    >
                  </div>
                  <div :style="{ width: 77 / 96 + 'rem' }">
                    <span
                      :style="{
                        fontSize: 38 / 96 + 'rem',
                        lineHeight: 30 / 96 + 'rem',
                        color:
                          item.fNum > 4
                            ? 'rgb(229, 9, 9)' : item.isUp == 1 ?'#ffc336'
                            : 'rgba(238, 238, 238, 0.8)',
                      }"
                      style="font-family: SimHei; font-weight: 400"
                    >{{ item.fNum }}</span
                    >
                  </div>
                  <div :style="{ width: 77 / 96 + 'rem' }">
                    <span
                      :style="{
                        fontSize: 38 / 96 + 'rem',
                        lineHeight: 30 / 96 + 'rem',
                        color: item.isUp == 1 ? '#ffc336 !important' : '#fff'
                      }"
                      style="
                        font-family: SimHei;
                        font-weight: 400;
                        color: rgba(238, 238, 238, 0.8);
                      "
                    >{{ item.pNum }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 主体结束 -->
      <!-- 页脚logo开始 -->
      <div
        style="
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          position: fixed;
        "
        :style="{ bottom: 0 / 96 + 'rem' }"
        ref="footElement"
      >
        <!--<div :style="{ width: (300 / 96) + 'rem', height: (150 / 96) + 'rem' }">
          <img src="../../../static/logoBoom.png"
            style="width: 100%; height: 100%;" />
        </div> -->
        <!-- <div :style="{ width: (192 / 96) + 'rem', height: (87 / 96) + 'rem' }" -->
        <!-- <div :style="{ width: '2rem', height: '2rem' }" -->
        <div class="carousel-container">
          <div
            class="carousel"
            :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
          >
            <div
              v-for="(url, index) in carouselImages"
              :key="index"
              class="carousel-item"
            >
              <img :src="url" />
            </div>
          </div>
<!--          <button @click="prev" class="carousel-button prev">❮</button>-->
<!--          <button @click="next" class="carousel-button next">❯</button>-->
        </div>
      </div>
      <!-- 页脚logo结束 -->
       <!-- 弹窗开始 -->
      <div v-if="showModal" class="hhhhhhhhhhhhhhhhhhhhhhhhhhhhh"
        :style="{ position: 'fixed', top: '0', width: '100%', height: clientHeight + 'px', backgroundColor: 'rgba(0, 0, 0, 0.3)', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }">
        <div
          style="width: 60%; height: 60%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; background-color: #FFFFFF; border-radius: 0.1rem; position: relative;">
          <div
            style="width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end;">
            <div
              style="width: 10%; height: 0.7rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; cursor: pointer; padding-right: 0.3rem;"
              @click="hideSettingClick">
              <span style="font-size: 0.4rem; color: #333333;">X</span>
            </div>
          </div>
          <div
            style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 0.2rem;">
            <div style="width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;">
              <div
                style="width: 80%; display: flex; flex-direction: row; justify-content: center; align-items: center;">
                <div
                  style="width: 20%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                  <span style="font-size: 0.2rem; color: #000000;">比赛计时钟</span>
                </div>
                <div
                  style="width: 70%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                  <span style="font-size: 0.2rem; color: #000000;">每节时间</span>
                  <div
                    style="width: 0.5rem; height: 0.3rem; border: 0.01rem solid #EEEEEE; border-radius: 0.1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0rem 0.1rem;">
                    <input style="font-size: 0.2rem; width: 100%; height: 100%; text-align: center;"
                      v-model="sectionTimeInput" />
                  </div>
                  <span style="font-size: 0.2rem; color: #000000;">分</span>
                </div>
              </div>
              <div
                style="width: 20%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;">
                <el-switch v-model="value" active-color="#5DAC81" inactive-color="#CCCCCC" style="margin: 0rem 1rem;"
                  @change="valueChange">
                </el-switch>
              </div>
            </div>
          </div>
          <div
            style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 0.2rem;">
            <div style="width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;">
              <div
                style="width: 80%; display: flex; flex-direction: row; justify-content: center; align-items: center;">
                <div
                  style="width: 20%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                  <span style="font-size: 0.2rem; color: #000000;">进攻计时钟</span>
                </div>
                <div
                  style="width: 70%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                  <div
                    style="display: flex; flex-direction: row; justify-content: flex-start; align-items: center; margin-right: 0.2rem;">
                    <span style="font-size: 0.2rem; color: #000000;">进攻时间</span>
                    <div
                      style="width: 0.5rem; height: 0.3rem; border: 0.01rem solid #EEEEEE; border-radius: 0.1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0rem 0.1rem;">
                      <input style="font-size: 0.2rem; width: 100%; height: 100%; text-align: center;" v-model="time" />
                    </div>
                    <span style="font-size: 0.2rem; color: #000000;">秒</span>
                  </div>
                  <div
                    style="display: flex; flex-direction: row; justify-content: flex-start; align-items: center; margin-right: 0.2rem;">
                    <span style="font-size: 0.2rem; color: #000000;">进攻时间少于</span>
                    <div
                      style="width: 0.5rem; height: 0.3rem; border: 0.01rem solid #EEEEEE; border-radius: 0.1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0rem 0.1rem;">
                      <input style="font-size: 0.2rem; width: 100%; height: 100%; text-align: center;"
                        v-model="time2" />
                    </div>
                    <span style="font-size: 0.2rem; color: #000000;">秒</span>
                  </div>
                  <div
                    style="display: flex; flex-direction: row; justify-content: flex-start; align-items: center; margin-right: 0.2rem;">
                    <span style="font-size: 0.2rem; color: #000000;">时回</span>
                    <div
                      style="width: 0.5rem; height: 0.3rem; border: 0.01rem solid #EEEEEE; border-radius: 0.1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0rem 0.1rem;">
                      <input style="font-size: 0.2rem; width: 100%; height: 100%; text-align: center;"
                        v-model="time3" />
                    </div>
                    <span style="font-size: 0.2rem; color: #000000;">秒</span>
                  </div>
                </div>
              </div>
              <div
                style="width: 20%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;">
                <el-switch v-model="value2" active-color="#5DAC81" inactive-color="#CCCCCC" style="margin: 0rem 1rem;"
                  @change="value2Change">
                </el-switch>
              </div>
            </div>
          </div>
          <div style="width: 100%; height: 0.01rem; backgroundColor: #EEEEEE;"></div>
          <div
            style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
            <div
              style="width: 92%; height: 0.6rem; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
              <div
                style="width: 2rem; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                <span style="font-size: 0.2rem; color: #000000; font-weight: bold;">操作说明</span>
              </div>
            </div>
            <div
              style="width: 92%; height: 0.6rem; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
              <div
                style="width: 2rem; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                <span style="font-size: 0.2rem; color: #000000;">按 空格键</span>
              </div>
              <div
                style="width: 3rem; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                <span style="font-size: 0.2rem; color: #000000;">开始或停止比赛计时钟</span>
              </div>
              <div
                style="width: 0.6rem; height: 0.4rem; display: flex; flex-direction: row; justify-content: center; align-items: center; border: 0.01rem solid #CCCCCC; border-radius: 0.1rem;">
                <span style="font-size: 0.2rem; color: #000000;">空格</span>
              </div>
            </div>
            <div
              style="width: 92%; height: 0.6rem; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
              <div
                style="width: 2rem; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                <span style="font-size: 0.2rem; color: #000000;">按 K键</span>
              </div>
              <div
                style="width: 3rem; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                <span style="font-size: 0.2rem; color: #000000;">开始或停止进攻时钟</span>
              </div>
              <div
                style="width: 0.6rem; height: 0.4rem; display: flex; flex-direction: row; justify-content: center; align-items: center; border: 0.01rem solid #CCCCCC; border-radius: 0.1rem;">
                <span style="font-size: 0.2rem; color: #000000;">K</span>
              </div>
            </div>
            <div
              style="width: 92%; height: 0.6rem; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
              <div
                style="width: 2rem; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                <span style="font-size: 0.2rem; color: #000000;">按 J键</span>
              </div>
              <div
                style="width: 3rem; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                <span style="font-size: 0.2rem; color: #000000;">进攻计时钟回24秒</span>
              </div>
              <div
                style="width: 0.6rem; height: 0.4rem; display: flex; flex-direction: row; justify-content: center; align-items: center; border: 0.01rem solid #CCCCCC; border-radius: 0.1rem;">
                <span style="font-size: 0.2rem; color: #000000;">J</span>
              </div>
            </div>
            <div
              style="width: 92%; height: 0.6rem; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
              <div
                style="width: 2rem; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                <span style="font-size: 0.2rem; color: #000000;">按 L键</span>
              </div>
              <div
                style="width: 3rem; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                <span style="font-size: 0.2rem; color: #000000;">进攻计时钟回14秒</span>
              </div>
              <div
                style="width: 0.6rem; height: 0.4rem; display: flex; flex-direction: row; justify-content: center; align-items: center; border: 0.01rem solid #CCCCCC; border-radius: 0.1rem;">
                <span style="font-size: 0.2rem; color: #000000;">L</span>
              </div>
            </div>
          </div>
          <div style="width: 100%; height: 0.01rem; backgroundColor: #EEEEEE;"></div>
          <div
            style="width: 92%; height: 0.6rem; display: flex; flex-direction: row; align-items: center; justify-content: space-between; position: absolute; bottom: 0.3rem;">
            <div
              style="height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
              <span style="font-size: 0.3rem; color: #FF0000; font-weight: bold;">*特别注意：如果使用计时功能，比赛过程中不要刷新页面</span>
            </div>
            <div
              style="height: 100%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;">
              <div
                style="width: 1rem; height: 0.4rem; border: 0.01rem solid #EEEEEE; border-radius: 0.1rem; display: flex; flex-direction: row; justify-content: center; align-items: center; backgroundColor: #5DAC81; cursor: pointer;"
                @click="saveSettingClick">
                <span style="font-size: 0.2rem; color: #FFFFFF; font-weight: bold;">保存</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 弹窗结束 -->
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import common from "../../utils/common";
import {pageResize} from "../../utils/resetScreenSize.js";

export default {
  name: "Home",
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      // carouselImages: [
      //   require("../../../static/logoBoom.png"),
      //   require("../../../static/anotherImage.png"),
      //   require("../../../static/yetAnotherImage.png")
      // ],
      intervalId: null, // 用于存储定时器 ID
      currentIndex: 0,
      carouselImages: [],
      countDown: true,
      matchTitle: "",
      homeTeamName: "",
      awayTeamName: "",
      homeTeamImg: "",
      awayTeamImg: "",
      sectionsNum: "",
      minute: "06",
      second: "22",
      millisecond: "55",
      homeTeamScorce: 0,
      awayTeamScorce: 0,
      homeTeamSuspendNumK: 3,
      homeTeamSuspendNum: 0,
      awayTeamSuspendNumK: 3,
      awayTeamSuspendNum: 0,
      homeTeamfoulNum: 0,
      awayTeamfoulNum: 0,
      i: 0,
      contestId: 0,
      imgStr: "",
      homeTeamLists: [],
      awayTeamLists: [],
      mainHeight: 0,
      mainHeightItem: 0,
      mainHeightFix: 0,//固定值
      backsShows: false,
      homeTeamElementHeight: 0,
      awayTeamElementHeight: 0,
      timer: null,
      defaultHeadImg: require("../../../static/logoHead.png"),
      //
      settingShows: false,
      showModal: false,
      clientHeight: 0,
        value: false,
        value2: false,
        sectionShow: false,
        time1Show: false,
        sectionTimeInput: 12,
        sectionTime: 0,
        time: 24,
        time1: 0,
        time2: 14,
        time3: 14,
        timer1: null,
        startShows: false,
        timers: null,
        startTimeShows: false,
        showMinuteMnisecond: false,
        showModalTime: false,
        homeTeamScoreHeight: 0,
        awayTeamScoreHeight: 0,
        titleElementHeight: 0,
    };
  },
  computed: {
    classRightOption() {
      return {
        step: 0, // 数值越大速度滚动越快
        limitMoveNum: this.awayTeamLists.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
    classLeftOption() {
      return {
        step: 0, // 数值越大速度滚动越快
        limitMoveNum: this.homeTeamLists.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  mounted() {
    this.contestId = this.$route.query.contestId;
    pageResize();
    this.getImgStr();
    this.startAutoSlide(); // 开始自动轮播
    // setInterval(this.myFunction, 1000 * 5);
  },
  beforeDestroy() {
    this.stopAutoSlide(); // 组件销毁前清除定时器
  },
  methods: {
    next() {
      this.currentIndex =
        (this.currentIndex + 1) % this.carouselImages.length;
    },
    prev() {
      this.currentIndex =
        (this.currentIndex - 1 + this.carouselImages.length) %
        this.carouselImages.length;
    },
    startAutoSlide() {
      this.intervalId = setInterval(() => {
        this.next();
      }, 15000); // 每3秒切换一次
    },
    stopAutoSlide() {
      clearInterval(this.intervalId); // 清除定时器
    },
    async getImgStr() {
      console.log("getImg被调用" + this.contestId)
      fetch(`http://scorebar.yundongshugenmatch.cn/api/system/league/h5/getContestBanner?contestId=${this.contestId}`,
        {method: "GET"}).then((response) => response.json()).then((res) => {
          let {
            code,
            msg,
          } = res;
          if (res.code == 200) {
            // carouselImages: [
            //   require("../../../static/logoBoom.png"),
            //   require("../../../static/anotherImage.png"),
            //   require("../../../static/yetAnotherImage.png")
            // ],
            console.log("res.msg:" + res.msg)
            const imageArray = res.msg.split(',');
            this.carouselImages = imageArray.map(image => {
              return `https://boyubasketball.oss-cn-shanghai.aliyuncs.com/${image.trim()}`;
            });
          }
        })
    },
    myFunction() {
      this.i = this.i + 1;
      // console.log("轮训任务=================>" + this.i);
      //这里写自己的ajax请求访问后台就可以了
    },
    selectMatchVo(id) {
      // let leagueId = this.$route.query.leagueId
      let scheduleId = this.$route.query.matchId;
      let {defaultHeadImg} = this;
      // let jsons = {
      //   id: id
      // };
      let jsons = {
        // leagueId: leagueId,
        scheduleId: scheduleId,
        isJson: true,
      };
      console.log(defaultHeadImg);
      // http://m.yundongshugenmatch.cn/system/league/h5/getScore?tournamentId=60
      // this.$http.post('/competition/selectCompetitionData', jsons).then((res) => {
      fetch(
        `http://scorebar.yundongshugenmatch.cn/api/system/league/h5/getScore?tournamentId=${scheduleId}`,
        {method: "GET"}
      )
        .then((response) => response.json())
        .then((res) => {
          if (res.code == 200) {
            let homeTeamLists = [];
            let awayTeamLists = [];
            this.homeTeamName = res.data.teamOneName;
            this.awayTeamName = res.data.teamTwoName;
            this.matchTitle = res.data.contestName;
            this.homeTeamImg = res.data.teamOneLogo
              ? `https://boyubasketball.oss-cn-shanghai.aliyuncs.com/${res.data.teamOneLogo}`
              : ''; //defaultHeadImg
            this.awayTeamImg = res.data.teamTwoLogo
              ? `https://boyubasketball.oss-cn-shanghai.aliyuncs.com/${res.data.teamTwoLogo}`
              : ''; //defaultHeadImg
            // // "https://boyubasketball.oss-cn-shanghai.aliyuncs.com/" +
            // //   res.data.teamOneLogo || ;
            // this.awayTeamImg =
            //   "https://boyubasketball.oss-cn-shanghai.aliyuncs.com/" +
            //     res.data.teamTwoLogo || "../../../static/logoHead.png";
            // this.homeTeamImg = 'https://ydsg-1256672631.cos.ap-guangzhou.myqcloud.com/icon/defaultTeamLogo.png'// "../../static/league_match_logo.png";
            // this.awayTeamImg = 'https://ydsg-1256672631.cos.ap-guangzhou.myqcloud.com/icon/defaultTeamLogo.png' // "../../static/league_match_logo.png";
            this.homeTeamScorce = res.data.teamOneScore;
            this.awayTeamScorce = res.data.teamTwoScore;
            let quarter = res.data.subsection;
            if (quarter == 1) {
              this.sectionsNum = "第一节";
              // this.sectionsNum = "1st";
            }
            if (quarter == 2) {
              this.sectionsNum = "第二节";
              // this.sectionsNum = "2nd";
            }
            if (quarter == 3) {
              this.sectionsNum = "第三节";
              // this.sectionsNum = "3rd";
            }
            if (quarter == 4) {
              this.sectionsNum = "第四节";
              // this.sectionsNum = "4th";
            }
            if (quarter >= 5) {
              // this.sectionsNum = "加时赛";
              // this.sectionsNum = `ot${quarter - 4}`;
              this.sectionsNum = `第${quarter - 4}加时`;
            }
            this.homeTeamSuspendNum = res.data.homeTeamPause;
            this.awayTeamSuspendNum = res.data.awayTeamPause;
            this.homeTeamfoulNum = res.data.homeTeamFoul;
            this.awayTeamfoulNum = res.data.awayTeamFoul;
            for (let i = 0; i < res.data.playerListOne.length; i++) {
              // if(res.data.homePlayerStatistics[i].playerInfo) {
              homeTeamLists.push({
                pNum: res.data.playerListOne[i].playerScore,
                fNum: res.data.playerListOne[i].playerFoul,
                isUp: res.data.playerListOne[i].isUp,
                // fNum: common.foulFormat(res.data.playerListOne[i].playerFoul),
                // fNum: res.data.playerListOne[i].playerFoul, // common.foulFormat(res.data.playerListOne[i].playerFoul), // res.data.playerListOne[i].playerFoul,
                playerNum: res.data.playerListOne[i].playerNumber,
                playerName: res.data.playerListOne[i].playerName,
                // isFirst: res.data.playerListOne[i].isFirst || false
              });
              // }
            }
            homeTeamLists.sort((a, b) => {
              return b.pNum - a.pNum;
            });
            this.homeTeamLists = homeTeamLists;
            console.log(res.data.playerListTwo.length);
            for (let i = 0; i < res.data.playerListTwo.length; i++) {
              awayTeamLists.push({
                pNum: res.data.playerListTwo[i].playerScore,
                fNum: res.data.playerListTwo[i].playerFoul,
                isUp: res.data.playerListTwo[i].isUp,
                playerNum: res.data.playerListTwo[i].playerNumber,
                playerName: res.data.playerListTwo[i].playerName,
              });
            }
            awayTeamLists.sort((a, b) => {
              return b.pNum - a.pNum;
            });
            this.awayTeamLists = awayTeamLists;
            this.$nextTick(() => {
              this.mainHeight =
                document.documentElement.clientHeight -
                this.$refs.matchTitleElement.offsetHeight -
                this.$refs.teamElement.offsetHeight;
              // this.mainHeightItem = document.documentElement.clientHeight - this.$refs.matchTitleElement.offsetHeight - this.$refs.teamElement.offsetHeight - this.$refs.titleElement.offsetHeight;
              this.homeTeamElementHeight =
                this.$refs.homeTeamElement.offsetHeight;
              this.awayTeamElementHeight =
                this.$refs.awayTeamElement.offsetHeight;
              this.mainHeightItem = Math.ceil(
                (this.homeTeamElementHeight / this.homeTeamLists.length) * 12
              );
            });
          } else {
            this.$toast(res.msg);
          }
        })
        .catch((e) => {
        });
    }
    ,
    getMatchList() {
      console.log("getMatchList");
    }
    ,
    leaveClick() {
      this.backsShows = false;
    }
    ,
    enterClick() {
      this.backsShows = true;
    }
    ,
    goBackClick() {
      this.$router.back();
    }
    ,
    toMatchInfosClick() {
      // this.$router.push({
      // name: "MatchInfos", query: {}
      // });
    },
    leaveSettingClick () {
        this.settingShows = false;
      },
      enterSettingClick () {
        this.settingShows = true;
      },
      settingClick () {
        this.showModal = true;
      },
      hideSettingClick () {
        this.showModal = false;
      },
      valueChange (e) {
        console.log("e: ", e);
      },
      value2Change (e) {
        console.log("e2: ", e);
      },
      saveSettingClick () {
        clearInterval(this.timer1);
        clearInterval(this.timers);
        this.sectionTime = this.sectionTimeInput;
        this.second = 0;
        this.millisecond = 0;
        this.resetTime(this.sectionTimeInput, this.second, this.millisecond);
        this.time1 = this.time;
        this.sectionShow = this.value;
        this.time1Show = this.value2;
        this.showModal = false;
        this.startShows = false;
        this.startTimeShows = false;
        if (this.value || this.value2) {
          this.showModalTime = true;
        } else {
          this.showModalTime = false;
        }
      },
      startTime1 (time) {
        if (this.time1Show) {
          let msg;
          let maxtime = time * 1000;
          this.timer1 = setInterval(() => {
            if (maxtime >= 0) {
              let seconds = Math.floor(maxtime / 1000) < 10 ? "0" + Math.floor(maxtime / 1000) : Math.floor(maxtime / 1000);
              let ms = Math.floor(maxtime % 1000 / 100);
              if (seconds <= 5) {
                this.time1 = seconds + "." + ms;
              } else {
                this.time1 = seconds;
              }
              msg = seconds + "." + ms;
              maxtime -= 100;
            } else {
              this.time1 = 0;
              clearInterval(this.timer1);
              clearInterval(this.timers);
              this.startShows = false;
              this.startTimeShows = false;
              this.$refs.audioShortRef.play();
              setTimeout(() => {
                this.$refs.audioShortRef.currentTime = 0;
                this.$refs.audioShortRef.pause();
              }, 2000);
            }
          }, 100);
        }
      },
      resetTime (time, secondTime, msTime) {
        let maxtime = time * 60 * 1000 + secondTime * 1000;
        if (maxtime > 0) {
          let minutes = time < 10 ? "0" + time : time; // Math.floor(maxtime / 60 /1000) < 10 ? "0" + Math.floor(maxtime / 60 /1000) : Math.floor(maxtime / 60 /1000);
          let seconds = secondTime < 10 ? "0" + secondTime : secondTime; // Math.floor(maxtime / 1000 % 60) < 10 ? "0" + Math.floor(maxtime / 1000 % 60) : Math.floor(maxtime / 1000 % 60);
          let ms = msTime;
          this.minute = minutes;
          this.second = seconds;
          this.millisecond = ms;
          this.showMinuteMnisecond = minutes > 0 ? true : false;
          this.sectionTime = maxtime / 60 / 1000;
        } else {

        }
      },
      countTime (time, secondTime, msTime) {
        console.log("secondTime: ", secondTime);
        let maxtime = time * 60 * 1000 + secondTime * 1000;
        this.timers = setInterval(() => {
          if (maxtime >= 0) {
            let minutes = Math.floor(maxtime / 60 / 1000) < 10 ? "0" + Math.floor(maxtime / 60 / 1000) : Math.floor(maxtime / 60 / 1000);
            let seconds = Math.floor(maxtime / 1000 % 60) < 10 ? "0" + Math.floor(maxtime / 1000 % 60) : Math.floor(maxtime / 1000 % 60);
            let ms = Math.floor(maxtime % 1000 / 100);
            this.minute = minutes;
            this.second = seconds;
            this.millisecond = ms;
            this.showMinuteMnisecond = minutes > 0 ? true : false;
            maxtime -= 100;
            this.sectionTime = maxtime / 60 / 1000;
          } else {
            clearInterval(this.timers);
            clearInterval(this.timer1);
            this.startShows = false;
            this.startTimeShows = false;
            this.$refs.audioLongRef.play();
            setTimeout(() => {
              this.$refs.audioLongRef.currentTime = 0;
              this.$refs.audioLongRef.pause();
            }, 8000);
          }
        }, 100);
      },
      showMinuteMnisecondClick () {
        clearInterval(this.timers);
        this.showMinuteMnisecond = !this.showMinuteMnisecond;
        if (this.showMinuteMnisecond) {
          let minute = this.minute;
          let second = this.second;
          let millisecond = this.millisecond;
          this.minute = second;
          this.second = millisecond;
          this.millisecond = millisecond;
        } else {
          let minute = this.minute;
          let second = this.second;
          let millisecond = this.millisecond;
          this.minute = 0;
          this.second = minute;
          this.millisecond = second;
        }
        if (this.startShows) {
          this.countTime(this.minute, this.second, this.millisecond);
        }
      },
      minuteInput (e) {
        console.log("e: ", e);
        clearInterval(this.timers);
        this.sectionTime = e.target.value;
        if (this.startShows) {
          this.countTime(e.target.value, this.second, this.millisecond);
        } else {
          // this.resetTime(e.target.value, this.second, this.millisecond);
        }
      },
      secondInput (e) {
        console.log("e: ", e);
        clearInterval(this.timers);
        this.second = e.target.value;
        if (this.startShows) {
          this.countTime(this.minute, e.target.value, this.millisecond);
        } else {
          // this.resetTime(this.minute, e.target.value, this.millisecond);
        }
      },
      millisecondInput (e) {
        console.log("e: ", e);
        clearInterval(this.timers);
        this.millisecond = e.target.value;
        if (this.startShows) {
          this.countTime(this.minute, this.second, e.target.value);
        } else {
          // this.resetTime(this.minute, this.second, e.target.value);
        }
      }
  },
  activated() {
    this.clientHeight = document.documentElement.clientHeight;
    this.homeTeamLists = [];
    this.awayTeamLists = [];
    window.document.title = "大屏比分";
    let matchId = this.$route.query.matchId;

    this.selectMatchVo(matchId);
    this.backsShows = false;
    this.timer = setInterval(() => {
      this.selectMatchVo(matchId);
    }, 2000);
    document.addEventListener('keydown', (e) => {
        if (e.keyCode == 32) {
          // 空格
          if (!this.showModalTime) {
            return;
          }
          clearInterval(this.timers);
          clearInterval(this.timer1);
          this.startShows = !this.startShows;
          if (this.time1 > 0) {
            if (this.startShows) {
              this.startTimeShows = true;
            } else {
              this.startTimeShows = false;
            }
          }
          console.log(this.startShows);
          if (this.startShows) {
            this.countTime(this.minute, this.second, this.millisecond);
            if (this.time1 > 0) {
              this.startTime1(this.time1);
            }
          } else {
            clearInterval(this.timers);
            clearInterval(this.timer1);
          }
        }
        if (e.keyCode == 74) {
          // J
          if (!this.showModalTime) {
            return;
          }
          if (this.minute <= 0 && this.second <= this.time) {
            return;
          }
          clearInterval(this.timer1);
          this.time1 = this.time;
          if (!this.startTimeShows) {
            return;
          }
          if (this.startShows) {
            this.startTimeShows = true;
          } else {
            this.startTimeShows = false;
          }
          if (this.time1 > 0 && this.startTimeShows) {
            this.startTime1(this.time1);
          }
        }
        if (e.keyCode == 75) {
          // K
          if (!this.showModalTime) {
            return;
          }
          clearInterval(this.timer1);
          this.startTimeShows = !this.startTimeShows;
          if (this.startTimeShows) {
            this.startTime1(this.time1);
          } else {
            clearInterval(this.timer1);
          }
        }
        if (e.keyCode == 76) {
          // L
          if (!this.showModalTime) {
            return;
          }
          if (this.minute <= 0 && this.second <= this.time3) {
            return;
          }
          clearInterval(this.timer1);
          this.time1 = this.time3;
          if (!this.startTimeShows) {
            return;
          }
          if (this.startShows) {
            this.startTimeShows = true;
          } else {
            this.startTimeShows = false;
          }
          if (this.time1 > 0 && this.startTimeShows) {
            this.startTime1(this.time1);
          }
        }
      });
  },
  deactivated() {
    clearInterval(this.timer);
    clearInterval(this.timer1);
    clearInterval(this.timers);
    this.mainHeight = 0;
    this.mainHeightItem = 0;
    this.homeTeamElementHeight = 0;
    this.awayTeamElementHeight = 0;
    this.$destroy("MatchSchedule");
  },
};
</script>

<style scoped>
.carousel-container {
  position: relative;
  width: 3rem; /* 设置宽度 */
  overflow: hidden; /* 隐藏超出部分 */
}

.carousel {
  display: flex;
  transition: transform 0.5s ease; /* 添加过渡效果 */
}

.carousel-item {
  min-width: 100%; /* 每个项目占满一整屏 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel img {
  width: 100%;
  height: auto;
}

.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.7);
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.carousel-button.prev {
  left: 0;
}

.carousel-button.next {
  right: 0;
}

.home-index {
  font-family: SimHei;
}

.match-title-main {
  width: 86%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.match-title {
  font-family: SimHei;
  font-weight: 400;
  /* color: rgba(255, 255, 255, 0.95); */
  color: #fff;
}

.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

.seamless-warp {
  width: 100%;
  overflow: hidden;
  /* overflow-y: scroll; */
}

.title-img {
  margin-left: 0.5rem;
  display: flex;
  align-items: center;
  border-radius: 50%;
  overflow: hidden;
}

.title-img > img {
  width: 100%;
  /* height: 100%; */
  border-radius: 100%;
}

.body-con-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  margin-top: -20px;
}

.body-con {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: hidden;
  width: 30%;
}

* {
  padding: 0px;
  margin: 0px;
}

.list-one {
  display: flex;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.list-one > div {
  display: flex;
  justify-content: center;
}
</style>
